<template>
    <div>
        <panle title='更新列表' content="看课-更新列表">
        </panle>
        <el-row class="pt20">
            <pers-button icon="" size="mini" @click="add()" perms="kanke:setting:addSettings" type="primary"
                label="添加"></pers-button>
        </el-row>
        <el-table :data="tableData" style="margin-bottom: 20px;" row-key="id" border stripe default-expand-all
            v-loading="loading">
            <el-table-column prop="type" align="center" label="类型">
                <template slot-scope="scope">
                    {{ scope.row.type === 1 ? '安卓' : 'IOS' }}
                </template>
            </el-table-column>
            <el-table-column prop="version_code" align="center" label="版本号"></el-table-column>
            <el-table-column prop="desc" align="center" label="更新内容"></el-table-column>
            <el-table-column prop="url" align="center" label="下载地址">
                <template slot-scope="scope">
                    <el-button type="text" @click="handleCopy(scope.row.url)">{{ scope.row.url }}</el-button>
                </template>

            </el-table-column>

            <el-table-column prop="is_force" align="center" label="是否强制更新">
                <template slot-scope="scope">
                    {{ scope.row.is_force === 1 ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column prop="handle" align="center" fixed="right" width="120" label="操作">
                <template slot-scope="scope">
                    <PersButton type="text" perms="kanke:setting:addSettings" label="编辑" @click="handleEdit(scope.row)">
                    </PersButton><br />
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
            :current-page="pageInfo.pageNumber" :page-sizes="pageSizes" :page-size="pageInfo.pageSize" background
            layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        <el-dialog title="添加更新" :visible.sync="dialogFormVisible">
            <el-form :model="form" ref="form" :rules="rules">
                <el-form-item label="类型" prop="type" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.type">
                        <el-radio :label="1">安卓</el-radio>
                        <el-radio :label="2">IOS</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="版本号" prop="version_code" :label-width="formLabelWidth">
                    <el-input v-model="form.version_code" autocomplete="off" maxlength="250"></el-input>
                    <el-input v-model="form.id" type="hidden"></el-input>
                </el-form-item>
                <el-form-item label="更新内容" prop="desc" :label-width="formLabelWidth">
                    <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="请输入内容"
                        v-model="form.desc" maxlength="255">
                    </el-input>
                </el-form-item>
                <el-form-item label="是否强制更新" prop="is_force" :label-width="formLabelWidth">
                    <el-radio-group v-model="form.is_force">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="2">否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="下载地址" prop="url" :label-width="formLabelWidth">
                    <el-input v-model="form.url" autocomplete="off" maxlength="255"></el-input>
                    <el-upload v-if="form.type == 1" class="upload-demo" :action="ocsAction" :limit="1"
                        :on-exceed="handleExceed" :file-list="fileList" :http-request="handleUpload" v-loading="loading"
                        :accept="myAccept">
                        <el-button size="small" type="primary">点击上传</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit('form')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { pageSizes } from '@/constant/index';
import { getCosUrl } from '@/api/kanke/textbook/material'
import { getList, addUpdateSetting } from '@/api/kanke/textbook/settings'



export default {
    name: "kankeupdatesetting",
    data() {
        return {
            loading: false,
            tableData: [
            ],
            total: 0,
            pageInfo: {
                pageNumber: 1,
                pageSize: 10
            },
            form: {
                id: 0,
                'type': 1,
                'version_code': '',
                'desc': '',
                'url': '',
                'is_force': 1
            },
            pageSizes,
            dialogFormVisible: false,
            formLabelWidth: '100px',
            fileList: [],
            ocsAction: '/apikanke/upload/uploadCosUrl',

        }
    },
    computed: {
        myAccept() {
            return '.apk';
        },
        rules() {
            return {
                type: [
                    { required: true, message: '请选择类型', trigger: 'change' },
                ],
                version_code: [
                    { required: true, message: '请输入版本号', trigger: 'blur' },
                ],
                desc: [
                    { required: true, message: '请输入更新内容', trigger: 'change' },
                ],
                url: [
                    { required: true, message: '请输入下载地址', trigger: 'blur' },
                ],
                is_force: [
                    { required: true, message: '请选择是否强制更新', trigger: 'change' },
                ]
            }
        }
    },
    mounted() {
        this.init()
    },
    methods: {
        handleCopy(copyUrl) {
            this.$copyText(copyUrl).then(
                () => {
                    this.$message.success(
                        '链接已复制!',
                    );
                },
                e => {
                    console.warn(e);
                }
            );
        },
        handleEdit(row) {
            this.form = { ...row }
            this.dialogFormVisible = true
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        }, isShow() {

        },
        add() {
            this.dialogFormVisible = true
            this.form = {
                id: 0,
                'type': 1,
                'version_code': '',
                'desc': '',
                'url': '',
                'is_force': 1
            }
        },
        handleSizeChange() { },
        handleCurrentChange() { },
        handleUpload(e) {
            const file = e.file;
            // 使用 ocs 上传
            const formData = new FormData();
            formData.append('file', file);
            this.loading = true;
            getCosUrl(formData).then((res) => {
                this.loading = false;
                if (res.code !== 200) {
                    this.$message.error(res.msg);
                    return
                }
                this.form.url = res.data.url
            })
        },
        init() {
            this.loading = true;
            const params = Object.assign({}, this.pageInfo)
            getList(params).then(res => {
                this.loading = false
                if (res.code == 200) {
                    this.tableData = res.data.data
                    this.total = res.data.total
                    this.pageInfo.pageSize = res.data.per_page
                    this.pageInfo.pageNumber = res.data.current_page
                }
            })
        },
        handleSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (!valid) return false;
                console.log('submit', this.form)
                addUpdateSetting(this.form).then(res => {
                    if (res.code == 200) {
                        this.dialogFormVisible = false
                        this.$refs[formName].resetFields()
                        this.$message.success(res.msg);
                        this.init()
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            });
        }

    }

}
</script>
<style lang="scss" scoped></style>